<template>
    <a-col :span="colSpan">
        <div class="search-form">
            <label v-if="label" class="search-form_label" :style="[styleWidth, styleAlign]">{{ label }}</label>
            <div class="search-form_control"><slot /></div>
        </div>
    </a-col>
</template>
<script setup>
import { computed, inject } from "vue"
import { SEARCH_FORM_KEY } from "@/constant/index"
// useStyle
import { useStyle } from "@/hook/index"
// props
import { searchItemProps } from "./props"
const props = defineProps(searchItemProps)

// 获取父组件
const searchFormKey = inject(SEARCH_FORM_KEY, undefined)
// 设置行间行式
const uStyle = useStyle()
const styleWidth = computed(() => uStyle.width(props.width))
const styleAlign = computed(() => uStyle.align(props.align))
// 自定义列
const colSpan = computed(() => {
    return props.span || (searchFormKey ? searchFormKey.span : props.span)
})

</script>
<style lang="scss" scoped>
.search-form {
    display: flex;
    align-items: center;
}
.search-form_label {
    width: 100px;
    text-align: right;
    padding-right: 17px;
    color: var(--gray-3);
}
.search-form_control {
    flex: 1;
    width: 0;
}
</style>